<template>
    <div  class="container calc-result-view-container">

        <van-nav-bar :title="calcResult.name" left-text="返回" left-arrow @click-left="onClickLeft">
            <template #right>
                <slot name="right-btn"></slot>
            </template>
        </van-nav-bar>

        <div id="calc-result-share" class="inner-container">

            <van-divider />
            <van-row class="title-row margin-bottom border-bottom">
                <van-col span="2" offset="1">位置</van-col>
                <van-col span="9">刻印</van-col>
                <van-col span="5">词条1</van-col>
                <van-col span="6">词条2</van-col>
            </van-row>

            <!-- 1~6 -->
            <van-row class="engr-row engr-text border-bottom mouse-point" v-for="(item, index) in calcResult.list" @click="onSelctEngr(item)">
                <van-col span="2" offset="1">{{ index | locationWord }}</van-col>
                <van-col span="3">
                    <van-image :height="30" :width="30" :src="item.icon"></van-image>
                </van-col>
                <van-col span="6" class="font-left">{{ item.name }}</van-col>

                <van-col span="5">{{ item.affix1 }}</van-col>
                <van-col span="6">{{ item.affix2 }}</van-col>
            </van-row>

            <van-row class="count-title-row margin-top">
                <van-col offset="1" span="2">总计:</van-col>
                <van-col span="4" offset="1">
                    <van-button icon="star-o">
                        <h4>{{ calcResult.mark }}</h4>
                    </van-button>
                </van-col>
            </van-row>
            <van-divider />

            <!-- 词条统计 -->
            <van-row>
                <!-- <van-col span="22" offset="1"> {{ calcResult.count|affixCount }}</van-col> -->
                <template v-if="affixList" v-for="key in Object.keys(calcResult.count)">
                    <van-button class="affix-btn" plain :type="$options.filters.getButtonTypeByAffix(key)"
                        @mouseover.native="onAffixMouseover(key)" @mouseout="">
                        {{ key }} x{{ calcResult.count[key] }}
                    </van-button>
                </template>
            </van-row>

            <!-- 套装效果 -->
            <van-divider>套装</van-divider>
            <van-row>
                <van-col class="groupEffect-text" span='22' offset='1' v-for="text in getGropEffect()">
                    {{ (text||"") | placeholder }}
                    <van-divider />
                </van-col>
            </van-row>

            <!-- 备注 -->
            <van-divider  v-if="calcResult.remark && calcResult.remark != ''">备注</van-divider>
            <van-row v-if="calcResult.remark && calcResult.remark != ''">
                <van-col class="groupEffect-text" span='22' offset='1'>{{ calcResult.remark | placeholder }}</van-col>
            </van-row>
        </div>

        <van-tabbar class="bottom-btn-container">
            <slot name="bottom-btn"> </slot>
        </van-tabbar>
    </div>

</template>

<script>
import { Toast, Notify } from 'vant';
import html2canvas from 'html2canvas';
const locWrods = ['I', 'II', 'III', 'IV', 'V', 'VI'];
const btnTypeAffix = ['', 'danger', 'danger', 'info', 'warning'];
let vm;

export default {
    name: "CalcResultView",
    components: {},
    props: {
        affixList: Array,
        affixOptions: Object,
        calcResult: Object,
    },

    beforeCreate() {
        vm = this;
    },

    data() {
        return {

        }
    },

    filters: {
        //用vm代替this

        //开头空两个格子
        placeholder(text) {
            return '\t' + text
        },

        locationWord(data) {
            return locWrods[data]
        },

        affixCount(data) {
            let text = "";
            Object.keys(data).forEach(k => {
                text += k + "x" + data[k] + "  ";
            });
            return text;
        },

        getButtonTypeByAffix(data) {
            let type = 0;
            vm.affixList.some(e => {
                if (e.name == data) {
                    type = e.type;
                    return true;
                }
            })
            return btnTypeAffix[type];
        }
    },

    computed: {

    },

    methods: {
        getLocationWord(val) {
            switch (val) {
                case 1:
                    return "I";
                case 2:
                    return "II";
                case 3:
                    return "III";
                case 4:
                    return "IV";
                case 5:
                    return "V";
                case 6:
                    return "VI";
            }
        },

        getGropEffect() {
            let object = {};
            this.calcResult.list.forEach(e => {
                object[e.effect] = 1; //利用key可以覆盖的原理
            });
            delete object.undefined
            return Object.keys(object);
        },

        //分享
        onShare() {
            Toast({
                message: '正在生成图片...',
                position: 'top',
                type: 'loading',
                overlay: true,
                duration: 0
            });

            let element = document.querySelector('#calc-result-share');

            //长截图实现 
            //克隆元素 设置长宽完全展开
            let _clone = element.cloneNode(true);
            _clone.id += "_clone";
            _clone.style.zIndex = 0
            _clone.style.width = element.scrollWidth + 'px'
            _clone.style.height = element.scrollHeight + 'px'
            document.body.appendChild(_clone)
            //end

            html2canvas(_clone, {
                allowTaint: true,  
                taintTest: true,    
                preserveDrawingBuffer: true,
                useCORS: true, //跨域图片处理
            }).then(canvas=> {
                let url = canvas.toDataURL(1); //得到base64编码
                let a = document.createElement("a"); 
                let event = new MouseEvent("click"); 
                a.download = "刻印方案分享："+(this.calcResult.name||"临时方案");
                a.href = url; 
                a.dispatchEvent(event); 
                _clone.remove();
                Toast.clear();
                Notify({ type: 'success', message: "\n分享成功！", duration: 2000 });
            })
        },

        onAddCompare(item) {
            this.$emit("addCompare", item);
        },

        onAddFavorite(item) {
            this.$emit("addFavorite", item);
        },

        onRemove(item) {
            this.$emit("onResultRemove", item);
        },

        onClickLeft() {
            this.$emit('crvClose');
        },

        onSelctEngr(engr) {
            this.$emit('engrView', engr)
        },

        onAffixMouseover(key) {
            let message = "";
            this.affixList.some(e => {
                if (e.name == key) {
                    message = '\n' + e.text;
                    return true;
                }
            })

            Notify.clear();
            this.$nextTick().then(() => {
                Notify({ type: 'success', message, duration: 2000 });
            })
        },

        onAffixMouseout() {

        }
    }
}

</script>

<style scoped>
.container {
    width: 450px;
    height: 750px;
    /* border-radius: 20px; */
}

.inner-container {
    width: 450px;
    height: 650px;
    overflow-y: auto;
    overflow-x: hidden;
}

.engr-text{
    font-size:14px;
}

.affix-btn {
    height: 30px;
    margin-left: 5px;
    margin-bottom: 5px;
}
.groupEffect-text{
    font-size: 13px;
}
.title-row {
    margin-top: 10px;
    text-align: center;
    color: darkgray;
}

.engr-row {
    height: 35px;
    text-align: center;
}

.engr-row .van-col {
    height: 35px;
    line-height: 35px;
}

.count-title-row {
    height: 30px;
    line-height: 30px;
}

.count-title-row .van-button {
    height: 30px;
    line-height: 30px;
    position: relative;
    top: -6px;
}

.count-title-row .van-button h4 {
    position: relative;
    top: 0.6px;
}


.engr-row .van-image {
    margin: 2px 5px;
}


.van-popup {
    bottom: 0px;
}

/* 全局样式 */
.calc-result-view-container /deep/.bottom-btn-container .van-button{
    margin: auto;
}
</style>